<template>
  <div>
    <el-dialog
      v-model="isShow"
      :title="$demoi18n('panel.jumpurlSetting.dialogTitle')"
      width="380px"
      top="8.4vh"
      append-to-body
      destroy-on-close
      :close-on-click-modal="false"
      :class="`${customClass} ${visualThemeClassName} ${xvueNameSpace}`"
    >
      <div class="jumpurl-setting-main">
        <PanelLabelOverflowTooltip ref="panelLabelOverflowTooltip" />
        <el-form
          ref="form"
          v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
          class="form"
          label-position="right"
          :model="form"
          :rules="rules"
          label-width="85px"
        >
          <div
            class="jump-panel-wrapper"
            style="text-align: center;"
          >
            <VsFormItem prop="linkType">
              <el-radio-group
                v-model="form.linkType"
                size="default"
                :fill="activeColorRadio"
                @change="linkTypeChange"
              >
                <el-radio
                  label="link"
                  style="margin-right: 60px"
                >{{ $demoi18n('word.link') }}</el-radio>
                <el-radio label="page">{{ $demoi18n('word.page') }}</el-radio>
              </el-radio-group>
            </VsFormItem>
          </div>
          <div
            v-if="form.linkType === 'link'"
            class="jump-panel-wrapper"
          >
            <VsFormItem prop="jumpUrl">
              <el-input
                v-model="form.jumpUrl"
                type="textarea"
                autosize
                :placeholder="$demoi18n('placeholder.plsEnterJumpPageLink')"
              ></el-input>
            </VsFormItem>
          </div>
          <template v-if="form.linkType === 'page'">
            <VsFormItem
              v-if="!isAurora"
              :label="$demoi18n('word.site')"
              prop="siteId"
            >
              <el-select
                v-model="form.siteId"
                :class="'panel-data-select-' + xvueTheme"
                :popper-class="'select-poper-' + xvueTheme"
                size="default"
                style="width:100%;"
                @change="siteChange"
              >
                <el-option
                  v-for="site in siteList"
                  :key="site.applicationUuid"
                  :label="site.name"
                  :value="site.applicationUuid"
                ></el-option>
              </el-select>
            </VsFormItem>
            <VsFormItem
              :label="$demoi18n('word.catalog')"
              prop="directoryId"
            >
              <el-select
                v-model="form.directoryId"
                :class="'panel-data-select-' + xvueTheme"
                :popper-class="'select-poper-' + xvueTheme"
                size="default"
                style="width:100%;"
                @change="directoryChange"
              >
                <el-option
                  v-for="directory in directoryList"
                  :key="directory.uuid"
                  :label="directory.directoryName"
                  :value="directory.uuid"
                ></el-option>
              </el-select>
            </VsFormItem>
            <VsFormItem
              :label="$demoi18n('word.page')"
              prop="pageId"
            >
              <el-select
                v-model="form.pageId"
                :class="'panel-data-select-' + xvueTheme"
                :popper-class="'select-poper-' + xvueTheme"
                size="default"
                style="width:100%;"
                @change="pageChange"
              >
                <el-option
                  v-for="page in pageList"
                  :key="page.uuid"
                  :label="page.pageName"
                  :value="page.uuid"
                ></el-option>
              </el-select>
            </VsFormItem>
          </template>

          <VsFormItem
            :label="$demoi18n('panel.label.openInNewPage')"
            label-width="110px"
          >
            <el-switch v-model="form.isOpenNewPage"></el-switch>
          </VsFormItem>
        </el-form>
        <div class="action-button-group">
          <el-button
            class="button-sure"
            size="small"
            type="primary"
            @click="handleSave()"
          >{{
            $demoi18n('btn.confirm')
          }}</el-button>
          <el-button
            class="button-cancel"
            size="small"
            @click="cancel()"
          >{{ $demoi18n('btn.close') }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import jumpUrlBase from '@/mixin/jump-url-base';
import { generateRules, generateUrlRule, genRequireRule } from '@/utils/rules';

export default {
  name: 'JumpUrlSetting',
  components: { PanelLabelOverflowTooltip },
  mixins: [jumpUrlBase],
  emits: ['save'],
  data() {
    return {
      xvueNameSpace: process.env.xvueNameSpace, // 给挂载在body下的元素加上主类名
      isAurora: this.$platformName === 'Aurora',
      xvueTheme: window._adoPremise.uc.theme,
      customClass: `jumpurl-setting-dialog jumpurl-setting-dialog-${window._adoPremise.uc.theme || 'light'}`,
      isShow: false,
      activeColorRadio: '#2D8CF0', // 单选框选中时的颜色
      form: {},
      index: 0,
      rules: {
        jumpUrl: generateUrlRule(),
        siteId: genRequireRule({
          label: this.$demoi18n('word.site'),
        }),
        directoryId: genRequireRule({
          label: this.$demoi18n('word.catalog'),
        }),
        pageId: genRequireRule({
          label: this.$demoi18n('word.page'),
        }),
      },
    };
  },
  computed: {
    thisComp() {
      return this;
    },
  },
  watch: {},
  methods: {
    genRequireRule,
    generateRules,
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },
    openDialog(data, index) {
      const { jumpParams } = data;
      this.form = JSON.parse(JSON.stringify(jumpParams));
      this.index = index;
      this.getSiteListNew();
      this.isShow = true;
    },
    cancel() {
      this.isShow = false;
    },
    handleSave() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return;
        }
        this.$emit('save', { jumpForm: this.form, index: this.index });
        this.cancel();
      });
    },
  },
};
</script>

<style lang="less">
@import '../../../common/color-picker-panel.less';
</style>
<style lang="less" scoped>
.jumpurl-setting-dialog {
  .jumpurl-setting-main {
    .form {
      width: 100%;
      :deep(.el-form-item) {
        margin-bottom: 0;
        .el-form-item__label {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .is-error {
        margin-bottom: 15px;
      }
      .el-form-item__error {
        top: 100%;
        padding-top: 0;
      }
      .jump-panel-wrapper {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        :deep(.el-form-item__content) {
          margin-left: 0 !important;
        }
        .jump-text {
          width: 100%;
          line-height: 25px;
          font-size: 12px;
          span {
            color: #ff3b3b;
          }
        }
      }
    }
  }

  .action-button-group {
    text-align: right;
    padding-top: 20px;
    .button-sure {
      padding: 9px 35px;
      border-radius: 0;
    }
    .button-cancel {
      padding: 9px 35px;
      border-radius: 0;
    }
  }
}
</style>

<style lang="less">
@font_color_dark: #98cae6;
@borderColor_dark: #116584;
@textColor_dark: #ffffff;
@bgColor_dark: #000c17;
@font_color_active_dark: #00f0ff;
@background_color_dark: #071f30;
.jumpurl-setting-dialog-dark {
  .el-dialog__header {
    background: #183c5a;
    .el-dialog__title {
      color: #fff;
    }

    .el-dialog__headerbtn {
      .el-dialog__close {
        color: #fff;
      }
    }
  }

  .el-dialog__body {
    background: #0e2b40;

    .el-form-item__label {
      color: @font_color_dark;
    }

    .el-input {
      .el-input__inner {
        border-color: @borderColor_dark;
        color: @textColor_dark;
        background-color: @bgColor_dark;
      }

      .el-input__icon {
        color: @borderColor_dark;
      }
    }

    .el-radio-group {
      .el-radio {
        color: @textColor_dark;

        .el-radio__input {
          .el-radio__inner {
            border-color: @font_color_active_dark;
            background-color: unset;
          }
        }

        .is-checked {
          .el-radio__inner {
            &::after {
              background-color: @font_color_active_dark;
            }
          }
        }

        .el-radio__label {
          color: #fff;
        }
      }
      .is-checked {
        .el-radio__label {
          color: #00f0ff;
        }
      }
    }

    .el-switch__core {
      background-color: #064559;
      border-color: #064559;
    }

    .el-switch.is-checked {
      .el-switch__core {
        background-color: #0eb4c2;
        border-color: #0eb4c2;
      }
    }

    .el-color-picker {
      .el-color-picker__trigger {
        border-color: @borderColor_dark;
      }
    }

    // 表格
    .config-panel-table {
      color: @font_color_dark;
      background-color: @background_color_dark;

      &::before {
        background-color: @background_color_dark;
      }

      .cell {
        padding: 0 3px !important;
      }
      td,
      th {
        padding: 5px 0 !important;
      }

      .el-table__header {
        th {
          background-color: #122b40 !important;
          border-color: #122b40;
          color: @font_color_dark;
        }
      }

      .el-table__body {
        tr {
          td {
            background-color: @background_color_dark;
            border-color: @background_color_dark;

            .icon-library-open {
              background-color: unset;
              border-color: #0eb4c2;
            }
          }
        }
      }

      .el-table__empty-block {
        background-color: #093758;

        .el-table__empty-text {
          color: @font_color_active_dark;
        }
      }
    }

    .button-sure {
      background-color: #0eb4c2;
      border-color: #0eb4c2;
      color: #fff;

      .el-icon-circle-plus {
        color: #fff;
      }
    }

    .button-cancel {
      background-color: #064559;
      border-color: #064559;
      color: #fff;

      .el-icon-circle-plus {
        color: #fff;
      }
    }
  }
}
</style>
